<template>
  <input
         :type="type"
         :value="currentValue"
         @input="handleInput"
         :style="foceBol?'background:#fff;':'background:rgba(246,246,246,1);'"
         @focus="foceBol=true"
         @blur="foceBol=false"
         />
</template>
<script>
  export default {
    name: 'iInput',
    props: {
      value: {
        type: String,
        default: ''
      },
      type: {
        type:String,
        default:'text'
      },
      rules: {
        type:Array
      },
      compaire: {
        type:String
      }
    },
    data () {
      return {
        currentValue: this.value,
        foceBol:false
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      alert(){
        alert();
      },
      handleInput (event,callback=function(){}) {
        const value = event.target.value;
        this.currentValue = value;
        this.rules.forEach(element => {
          if (element.required) {
            if (value === '') {
              callback(this.error({msg:element.msg,id:event.target.id}));
            } else {
              callback(this.error({id:event.target.id}));
            }
          }
          if (element.reg) {
            if ( value !== '' && !this.validate(value,element.reg)) {
              callback(this.error({msg:element.msg,id:event.target.id}))
            } else if (value !== ''){
              callback(this.error({id:event.target.id}))
            }
          }
          if (element.compaire) {
            if (value !== '' && this.compaire !== '' && !this.toCompaire(value,this.compaire)) {
              callback(this.error({msg:element.msg,id:event.target.id}))
            }
          }
        });
        // this.validate(value,)
        this.$emit('input', value);
      },
      validate(value,reg) {
          return reg.test(value);
      },
      toCompaire(value,compaireValue) {
        return value === compaireValue;
      },
      error(data) {
        this.$emit('error',data);
      }
    }
  }
</script>